<script lang="ts" setup>
interface Props {
  item?: any
  index?: number
}
const props = defineProps<Props>()
</script>

<template>
  <div class="app-container">
    <div class="ranking dflex">
      <div class="dflex city">
        <div class="city_i">{{ (index || 0) + 1 }}</div>
        <div class="city_t f14333">{{ item.name }}市</div>
      </div>
      <el-progress class="progress" :percentage="item.number_of_users">
        <el-button text>{{ item.number_of_users }}人</el-button>
      </el-progress>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ranking {
  margin: 15px 0;

  :deep(.el-progress-bar__inner) {
    background: linear-gradient(90deg, #ffbfc2 0%, #ff7075 100%);
  }

  .city {
    min-width: 122px;

    .city_i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ec4d53;
      color: #fff;
      text-align: center;
      line-height: 26px;
    }

    .city_t {
      margin: 0 10px;
    }
  }

  .progress {
    width: 100%;
  }
}
</style>
